<template>
    <div>
        <div>
            <el-card>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item>
                        <el-button @click="tianjia" size="mini"  icon="el-icon-plus" type="success">添加</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card class="box-card" style="margin-top: 10px">
                <div>
                    <el-table
                            :data="
                tableData.slice((pageNum - 1) * pageSize, pageNum * pageSize)
               "
                            border
                            style="width: 100%">
                        <el-table-column
                                fixed
                                prop="roleName"
                                label="角色名称">
                        </el-table-column>

                        <el-table-column
                                prop="remark"
                                label="描述">
                        </el-table-column>
                        <el-table-column
                                prop="number"
                                label="成员数量">
                        </el-table-column>
                        <el-table-column
                                prop="createTime"
                                label="添加时间">
                        </el-table-column>
                        <el-table-column
                                prop="enable"
                                label="是否启用">
                            <template slot-scope="scope">
                                <span v-if="scope.row.enable ==1">启用</span>
                                <span v-if="scope.row.enable ==2">未启用</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="220px" v-slot=scope>
                            <el-button
                                    type="primary"
                                    size="mini"
                                    icon="el-icon-edit"
                                    @click="updateById(scope.row)">修改</el-button>
                            <el-button
                                    type="danger"
                                    size="mini"
                                    icon="el-icon-delete"
                                    @click="delUser(scope.row)">删除</el-button>
                        </el-table-column>
                    </el-table>

                    <el-dialog title="修改" :visible.sync="updateOpen">
                        <el-form
                                :inline="true"
                                :model="update"
                                :label-position="labelPosition"
                                label-width="120px">
                            <el-form-item label="用户昵称">
                                <el-input  v-model="update.roleName"></el-input>
                            </el-form-item>
                            <el-form-item label="描述">
                                <el-input  v-model="update.remark"></el-input>
                            </el-form-item>
                            <el-form-item label="成员数量">
                                <el-input  v-model="update.number"></el-input>
                            </el-form-item>
                            <el-form-item label="是否启用">
                                <el-select v-model="update.enable" placeholder="活动区域">
                                    <el-option label="启用" value="1"></el-option>
                                    <el-option label="未启用" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="tijiao2">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </div>

                <el-dialog title="添加角色" :visible.sync="addOpen">
                    <el-form
                            :inline="true"
                            :model="add"
                            :label-position="labelPosition"
                            label-width="120px"
                    >
                        <el-form-item label="角色名称">
                            <el-input v-model="add.roleName"></el-input>
                        </el-form-item>

                        <el-form-item label="描述">
                            <el-input v-model="add.remark"></el-input>
                        </el-form-item>

                        <el-form-item label="成员数量">
                            <el-input v-model="add.number"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="tijiao1">提交</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
                <!--分页-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageNum"
                        :page-sizes="[2, 3, 4, 5, tableData.length]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.length"
                >
                </el-pagination>
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                pageNum: 1,
                pageSize: 2,
                addOpen: false,
                formLabelWidth: "80",
                tableData: [],
                updateOpen: false,
                update: {
                    roleName: "",
                    roleId: "",
                    remark:"",
                    number:"",
                    enable:""
                },
                add: {
                    roleName: "",
                    remark: "",
                    number: "",
                },
                queryUser:{},
            };
        },
        created() {
            this.selectData();
        },
        methods: {
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
            },
            handleCurrentChange(pageNum) {
                this.pageNum = pageNum;
            },
            tijiao1() {
                this.$confirm('是否添加此角色?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'}).then(() => {
                    this.postRequest("/house/role/addRole", this.add).then((res) => {
                        if (res.code == 20000) {
                            this.$message({
                                message: "添加成功",
                                type: "success",
                            });
                        }
                        this.addOpen = false
                        this.selectData()
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消添加',
                    });
                    this.addOpen = false
                    this.selectData()
                    this.add={}
                });

            },
            tijiao2() {
                this.$confirm('是否修改此用户?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'}).then(() => {
                    this.putRequest("/house/role/update", this.update).then((res) => {
                        if (res.code == 20000) {
                            this.$message({
                                message: "修改成功",
                                type: "success",
                            });
                        }
                        this.updateOpen = false
                        this.selectData()
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消添加',
                    });
                    this.updateOpen = false
                    this.selectData()
                });

            },
            tianjia() {
                this.addOpen = true;
            },
            updateById(row) {
                this.updateOpen = true;
                this.update = { ...row };
                this.getRequest("/house/role/findById/"+row.roleId)
                    .then((res) => {
                        this.update = res.data.list;
                    });
            },
            //删除
            delUser(row){
                this.$confirm('是否删除此用户?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'}).then(() => {
                    this.deleteRequest("/house/role/del/"+row.roleId).then((res) => {
                        if (res.code == 20000) {
                            this.$message({
                                message: "删除成功",
                                type: "success",
                            });
                        }
                        this.selectData()
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    });
                    this.selectData()
                });
            },
            //全查模糊查
            selectData() {
                this.getRequest('/house/role/findAll')
                    .then(resp => {
                        console.log(this.queryUser)
                        this.tableData=resp.data.role
                    })
            },
        },
    };
</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        margin-left: 30px ;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 110px;
        height: 110px;
        line-height: 110px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>